<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            user-select: none;
        }

        .right {
            font-size: 12px;
            color: green;
        }

        .err {
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <form onsubmit="return false">
        <p>
            <label for="user">用户名:</label>
            <input type="text" id="user" placeholder="用户名">
            <span id="user_span"></span>
        </p>
        <p>
            <label for="">密&emsp;码:</label>
            <input type="text" id="pwd">
            <span id="pwd_span"></span>
        </p>
        <p>
            <label for="">手机号:</label>
            <input type="text" id="phone">
            <span id="phone_span"></span>
        </p>
        <p>
            <label for="">邮&emsp;箱:</label>
            <input type="text" id="email">
            <span id="email_span"></span>
        </p>
        <p>
            <input type="submit" id="btn" value="注册" disabled>
        </p>
    </form>
</body>

<script>

    // 1. 获取元素 
    var userInp = document.getElementById("user");
    var userSpan = document.getElementById("user_span");

    var pwdInp = document.getElementById("pwd");
    var pwdSpan = document.getElementById("pwd_span");

    var phoneInp = document.getElementById("phone");
    var phoneSpan = document.getElementById("phone_span");

    var emailInp = document.getElementById("email");
    var emailSpan = document.getElementById("email_span");

    var btn = document.getElementById("btn");

    var isUserOk = false;
    var isPwdOk = false;
    var isPhoneOk = false;
    var isEmailOk = false;

    // 用户名:   由数字,字母 下划线组成,6-12位,且不能以数字开头
    // 一步到位
    userInp.onblur = function () {
        var user = userInp.value.trim();
        userInp.value = user;
        isUserOk = false; // 每次验证 默认还原为false

        var reg = /^[a-zA-Z_]\w{5,11}$/;

        if (reg.test(user)) {
            console.log(user);
            console.log(isExistUser(user));
            if (!isExistUser(user)) {
                userSpan.textContent = "√";
                userSpan.className = "right";
                isUserOk = true;
            } else {
                userSpan.textContent = "该用户名已注册";
                userSpan.className = "err";
            }
        } else {
            userSpan.textContent = "用户名由数字、字母、下划线组成,6-12位,且不能以数字开头";
            userSpan.className = "err";
        }
        isEnable();
    }

    // 密码:   由数字,字母 下划线组成,6-12位,
    pwdInp.onblur = function () {
        var pwd = pwdInp.value.trim();
        pwdInp.value = pwd;

        isPwdOk = false;

        var reg = /^\w{6,12}$/;

        if (reg.test(pwd)) {

            var isExistNum = /[0-9]/.test(pwd);
            var isExistSmall = /[a-z]/.test(pwd);
            var isExistBig = /[A-Z]/.test(pwd);
            var isExistSpe = /[_]/.test(pwd);
            var level = isExistNum + isExistSmall + isExistBig + isExistSpe;
            console.log(level);

            pwdSpan.textContent = "密码强度:" + level;
            pwdSpan.className = "right";
            isPwdOk = true;

        } else {
            pwdSpan.textContent = "密码由数字、字母、下划线组成,6-12位";
            pwdSpan.className = "err";
        }
        isEnable();
    }


    // 手机号: 
    phoneInp.onblur = function () {
        var phone = phoneInp.value.trim();
        phoneInp.value = phone;

        isPhoneOk = false;

        var reg = /^1[3-9]\d{9}$/;

        if (reg.test(phone)) {
            phoneSpan.textContent = "√";
            phoneSpan.className = "right";
            isPhoneOk = true;
        } else {
            phoneSpan.textContent = "请输入正确的手机号";
            phoneSpan.className = "err";
        }
        isEnable();
    }

    emailInp.onblur = function () {
        var email = emailInp.value.trim();
        emailInp.value = email;
        isEmailOk = false;

        // 1231231@qq.com
        var reg = /^\w+@\w+\.(com|cn|edu)$/;

        if (reg.test(email)) {
            emailSpan.textContent = "√";
            emailSpan.className = "right";
            isEmailOk = true;
        } else {
            emailSpan.textContent = "请输入正确的邮箱";
            emailSpan.className = "err";
        }
        isEnable();
    }

    function isEnable() {
        if (isUserOk && isPwdOk && isPhoneOk && isEmailOk) {
            btn.disabled = false;
            btn.onclick = registerHandler;
        } else {
            btn.disabled = true;
            btn.onclick = null;
        }
    }

    function registerHandler() {
        if (isUserOk && isPwdOk && isPhoneOk && isEmailOk) {
            btn.disabled = false;

            var user = userInp.value;
            var pwd = pwdInp.value;
            var phone = phoneInp.value;
            var email = emailInp.value;

            setCookie("user_" + user, JSON.stringify(user), 7);
            setCookie("pwd_" + user, JSON.stringify(pwd), 7);
            setCookie("phone_" + user, JSON.stringify(phone), 7);
            setCookie("email_" + user, JSON.stringify(email), 7);

            location.href = "./login.html"
        }
    }


    function setCookie(key, val, day, path = "/") {
        if (day != undefined) {
            var date = new Date();
            date.setDate(date.getDate() + day);
            document.cookie = key + "=" + val + ";expires=" + date.toUTCString() + ";path=" + path;
        } else {
            document.cookie = key + "=" + val + ";path=" + path;
        }
    }

    function getUserList() {
        var cookie = document.cookie;
        var arr = [];
        if (cookie) {
            var list = cookie.split(", ")//对象由,和空格分隔
            for (var i = 0; i < list.length; i++) {
                var item = list[i];
                var attr = item.split("=")[0];
                var val = item.split("=")[1];

                if (attr.startsWith("user_")) {
                    arr.push(decodeURIComponent(val));
                }
            }
        }
        return arr;
    }

    function isExistUser(user) {
        var cookie = document.cookie;
        var arr = [];
        if (cookie) {
            var list = cookie.split(", ")//对象由,和空格分隔
            for (var i = 0; i < list.length; i++) {
                var item = list[i];
                var attr = item.split("=")[0];
                var val = item.split("=")[1];

                if (attr.startsWith("user_")) {
                    arr.push(decodeURIComponent(val));
                }
            }
        }
        console.log(arr);
        return arr.includes(user);
    }
</script>

</html>